<!DOCTYPE html>

<html lang="zh-cmn-Hans">

<head>

    <meta charset="utf-8"/>

    <title>Position</title>


    <style>

        .z1, .z2, .z3 {

            width: 200px;

            height: 100px;

            padding: 10px;

            color: #fff;

            text-align: center;

            font: small-caps bold 16px Arial;

        }

        .z1 {

            position: absolute;

            top: 120px;

            left: 0px;

            z-index: 5;

            background: #006600;

        }

        .z2 {

            position: absolute;

            top: 0;

            left: 220px;

            z-index: 1;

            background: #003366;

        }

        .z3 {

            position: absolute;

            top: 0;

            left: 0;

            z-index: 3;

            background: #660066;

        }

        .z4 {

            width: calc(100% - 20px);

            height: 20px;

            background-color: rgba(153, 0, 51, 0.8);

            position: fixed;

            top: 0;

            left: 0;

            z-index: 10;

            padding: 10px;

            color: #fff;

            text-align: center;

            font: small-caps bold 16px Arial;

        }
    </style>

</head>

<body>

<div class="z1">Div1</div>

<div class="z2">Div2</div>

<div class="z3">Div3</div>

<div class="z4">Div4</div>

</body>

</html>
